<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta charset="UTF-8">
    <title>Spring Boot File Upload / Download Rest API Example</title>
    <link th:href="@{css/file_doload.css}" rel="stylesheet" type="text/css"/>
</head>
<body>
    <div class="upload-container">
        <div class="upload-header">
            <h2>Spring Boot File Upload / Download Rest API Example</h2>
        </div>
        <div class="upload-content">
            <div class="single-upload">
                <h3>Upload Single File</h3>
                <form id="singleUploadForm" name="singleUploadForm">
                    <input id="singleFileUploadInput" type="file" name="file" class="file-input" required/>
                    <button type="submit" class="primary submit-btn">Submit</button>
                </form>
                <div class="upload-response">
                    <div id="singleFileUploadError"></div>
                    <div id="singleFileUploadSuccess"></div>
                </div>
            </div>
            <div class="multiple-upload">
                <h3>Upload Multiple Files</h3>
                <form id="multipleUploadForm" name="multipleUploadForm">
                    <input id="multipleFileUploadInput" type="file" name="files" class="file-input" multiple required/>
                    <button type="submit" class="primary submit-btn">Submit</button>
                </form>
                <div class="upload-response">
                    <div id="multipleFileUploadError"></div>
                    <div id="multipleFileUploadSuccess"></div>
                </div>
            </div>
        </div>
    </div>
</body>
<script th:src="@{js/lib/require-2.3.6.js}" async="async" defer th:attr="data-main=@{js/file_upload_main.js}"></script>
</html>